<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <div class="new-step-top-actions">
    <button
      tuiButton
      type="button"
      (click)="previousStep()"
      appearance="tertiary"
      icon="arrow-left">
      {{ t('commons.back') }}
    </button>
  </div>

  <div class="new-step-wrapper">
    <h1
      class="new-step-title"
      id="main-area-title">
      {{ t('common_project.forms.project_details') }}
    </h1>
    <form
      class="template-project-form"
      #form="ngForm"
      [formGroup]="templateProjectForm"
      (ngSubmit)="createProject()"
      [showFormErrors]="formSubmitted">
      <tg-ui-select
        [label]="t('commons.workspace')"
        type="avatar">
        <tui-select
          tuiTextfieldSize="l"
          formControlName="workspace"
          [valueContent]="content"
          [readOnly]="true">
          {{ t('new_project.choose_workspace') }}
          <tui-data-list-wrapper
            *tuiDataList
            size="l"
            [items]="workspaces"
            [itemContent]="content">
          </tui-data-list-wrapper>
        </tui-select>
      </tg-ui-select>
      <ng-template
        #content
        let-data>
        <div class="workspace-option">
          <tg-ui-avatar
            size="m"
            type="dark"
            [color]="workspace.color"
            [name]="workspace.name">
          </tg-ui-avatar>
          <div class="name">{{ workspace.name }}</div>
        </div>
      </ng-template>

      <!-- Project name -->
      <tg-ui-input [label]="t('common_project.forms.project_name')">
        <input
          formControlName="name"
          data-test="input-name"
          inputRef
          tuiAutoFocus
          maxlength="80"
          (keyup)="setName()" />
        <ng-container inputError>
          <tg-ui-error
            [enabled]="form.submitted"
            data-test="name-required-error"
            error="required">
            {{ t('common_project.forms.project_name_error') }}
          </tg-ui-error>
          <tg-ui-error error="pattern">
            {{ t('common_project.forms.project_name_error') }}
          </tg-ui-error>
        </ng-container>
      </tg-ui-input>

      <!-- Project description -->
      <tg-ui-textarea
        [label]="t('common_project.forms.project_description')"
        [optional]="true">
        <tui-text-area
          class="general-textarea"
          formControlName="description"
          data-test="input-description"
          [expandable]="true"
          [maxLength]="200">
          {{ t('common_project.forms.project_description_placeholder') }}
        </tui-text-area>
        <tg-ui-error
          inputError
          [enabled]="form.submitted"
          data-test="description-maxlength-error"
          error="maxlength">
          {{ t('common_project.forms.max_length_error') }}
        </tg-ui-error>
      </tg-ui-textarea>

      <!-- Image upload  -->
      <tg-ui-image-upload
        [color]="templateProjectForm.get('color')?.value"
        [control]="logo"
        [title]="templateProjectForm.get('name')?.value"
        [label]="t('common_project.forms.project_icon')"
        [formatError]="t('common_project.forms.format_no_svg_error')"
        [tip]="t('common_project.forms.choose_image_no_svg_tip')"
        accept="image/webp, image/gif, image/jpg, image/jpeg, image/png">
      </tg-ui-image-upload>

      <div class="new-step-actions">
        <button
          (click)="cancelForm()"
          data-test="cancel-create-project"
          tuiButton
          type="button"
          appearance="tertiary">
          {{ t('commons.cancel') }}
        </button>
        <button
          loading
          [loadingMsg]="t('new_project.second_step.create_project_in_progress')"
          [loadingSuccess]="t('new_project.second_step.create_project_success')"
          iconRight="chevron-right"
          data-test="submit-create-project"
          tuiButton
          type="submit"
          appearance="primary">
          {{ t('common_project.create_project') }}
        </button>
      </div>
    </form>
  </div>

  <tg-ui-modal
    [open]="showWarningModal"
    (requestClose)="cancelRedirect()">
    <ng-container>
      <div
        class="confirmation-modal"
        data-test="discard-project-modal">
        <div
          role="dialog"
          aria-modal="true"
          aria-describedby="aria-description"
          aria-labelledby="aria-label">
          <h1 id="aria-label">
            {{ t('new_project.first_step.discard_project') }}
          </h1>
          <div id="aria-description">
            <p tabindex="0">
              {{ t('new_project.first_step.discard_warning') }}
            </p>
          </div>
          <div class="actions">
            <button
              tuiButton
              appearance="tertiary"
              (click)="cancelRedirect()">
              {{ t('commons.confirmation_modal.no') }}
            </button>
            <button
              tuiButton
              appearance="primary"
              (click)="acceptWarningClose()">
              {{ t('commons.confirmation_modal.yes') }}
            </button>
          </div>
        </div>
      </div>
    </ng-container>
  </tg-ui-modal>
</ng-container>
